.flex() {
  display: flex;
    flex-wrap: wrap;

}

.flex-center() {
  .flex();
  justify-content: center;
  align-content: center;
  align-items: center;
}
.flex-horizontal-around() {
    .flex();
    justify-content: space-around;
    align-content: center;
    align-items: center;
}
.flex-vertical-center() {
  .flex();
  align-items: center;
  align-content: center;
}

.flex-horizontal-center() {
  .flex();
  justify-content: center;
}

.flex-row-between() {
    .flex();
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.flex-row-right {
    .flex-vertical-center();
    justify-content: flex-end;
}

.flex-vertical-between() {
    .flex();
    align-content: space-between;
}
.flex-vertical-top() {
    .flex();
    align-content: flex-start !important;
    align-items: flex-start !important;
}

.overflow-hidden () {
  overflow: hidden;
}

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-overflow-line(@num) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @num;
  overflow: hidden;
}

.clearfix() {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.absolute-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bd-hover {
    translation: border-color .3s;
    cursor: pointer;
    &:hover {
        border-color: @green;
    }
}
.ft-hover {
    translation: color .3s;
    cursor: pointer;
    &:hover {
        color: @green;
    }
}
.bg-hover {
    translation: background .3s;
    cursor: pointer;
    &:hover {
        background: @green;
    }
}